<!--
 * @Author: your name
 * @Date: 2020-10-19 14:48:24
 * @LastEditTime: 2021-07-12 12:45:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \angular-pin-duoduo\src\app\my\components\my-container\my-container.component.html
-->
<div class="container">
  <ng-container *ngIf="profile$ | async as profile">
    <div class="my-info" (click)="showProfile()">
      <img appAvatar avatarSize="5rem" [src]="profile.avatar" alt="" class="my-avatar" />
      <div class="my-name">
        {{ profile.name }} <img src="assets/icons/wechat.png" alt="" />
      </div>
      <div class="my-badge">
        勋章墙 <img src="assets/icons/navigate_next.png" alt="" />
      </div>
      <div class="my-cashback">
        <span><img src="assets/icons/cashback.png" alt="" /> 拼单返现</span>
      </div>
      <div class="my-membership">
        <span><img src="assets/icons/membership.png" alt="" /> 省钱月卡</span>
      </div>
    </div>
    <div class="brand">
      <span class="title">品牌特卖</span>
      <span class="detail">自然堂直降</span>
      <img src="assets/icons/navigate_next.png" alt="" />
    </div>
    <div class="order-status">
      <div class="title">
        我的订单<span>查看全部<img src="assets/icons/navigate_next.png" alt="" /></span>
      </div>
      <app-horizontal-grid [displayCols]="5" [cols]="5">
        <span appGridItem *ngFor="let item of orderItems; let idx = index">

          <img appGridItemImage [appGridItemImageWidth]="'2rem'" [src]="item.icon" />
          <span appGridItemImage [appGridItemImageWidth]="'0.8rem'" class="title">{{
            item.title
            }}</span>
        </span>
      </app-horizontal-grid>
    </div>
    <div class="tools">
      <app-horizontal-grid [displayCols]="5" [cols]="5">
        <span appGridItem *ngFor="let item of toolsItems; let idx = index">
          <img appGridItemImage [appGridItemImageWidth]="'2rem'" [src]="item.icon" />
          <span appGridItemImage [appGridItemImageWidth]="'0.8rem'" class="title">{{
            item.title
            }}</span>
        </span>
      </app-horizontal-grid>
    </div>
  </ng-container>
</div>